import React, {Component, useState, useEffect} from 'react';
import {Animated, StyleSheet} from 'react-native';

class AnimateContainer extends Component {
  state = {
    color: new Animated.Value(0),
  };
  onScroll = Animated.event([
    {
      nativeEvent: {
        contentOffset: {
          y: this.state.color > 60 ? 60:this.state.color,
        },
      },
    },
  ]);

  render() {
    return (
      <Animated.View
        style={{
          backgroundColor: this.state.color.interpolate({
            inputRange: [0, 60],
            outputRange: ['rgba(18,137,170,0.9)', 'rgba(243,80,75,1)'],
          }),
        }}>
        {this.props.children}
      </Animated.View>
    );
  }
}

export default AnimateContainer;
